<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			
			.wrap {
				width: 300px;
				margin: 100px auto 0;
			}
			
			table {
				border-collapse: collapse;
				border-spacing: 0;
				border: 1px solid #c0c0c0;
				width: 300px;
			}
			
			th,
			td {
				border: 1px solid #d0d0d0;
				color: #404060;
				padding: 10px;
			}
			
			th {
				background-color: #09c;
				font: bold 16px "微软雅黑";
				color: #fff;
			}
			
			td {
				font: 14px "微软雅黑";
				text-align: center;
			}
			
			tbody tr {
				background-color: #f0f0f0;
			}
			
			tbody tr:hover {
				cursor: pointer;
				background-color: #fafafa;
			}
		</style>
	</head>

	<body>
		<div class="wrap">
			<table>
				<thead>
					<tr>
						<th>
							<input type="checkbox" id="j_cbAll" />
						</th>
						<th>菜名</th>
						<th>饭店</th>
					</tr>
				</thead>
				<tbody id="j_tb">
					<tr>
						<td>
							<input type="checkbox" />
						</td>
						<td>红烧肉</td>
						<td>田老师</td>
					</tr>
					<tr>
						<td>
							<input type="checkbox" />
						</td>
						<td>西红柿鸡蛋</td>
						<td>田老师</td>
					</tr>
					<tr>
						<td>
							<input type="checkbox" />
						</td>
						<td>红烧狮子头</td>
						<td>田老师</td>
					</tr>
					<tr>
						<td>
							<input type="checkbox" />
						</td>
						<td>日式肥牛</td>
						<td>田老师</td>
					</tr>
				</tbody>
			</table>
		</div>
		<script type="text/javascript">
			var j_cbAll = document.getElementById("j_cbAll");
			var j_tb = document.getElementById("j_tb");
			var inputs = j_tb.getElementsByTagName('input');
			j_cbAll.onclick = function() {
				for(i = 0; i < inputs.length; i++) {
					inputs[i].checked = this.checked;
				}
			}
			//	给下面所有的input注册点击事件
			for(var i = 0; i < inputs.length; i++) {
				inputs[i].onclick = function() {
					//判断有没有都选中
					var isCheckedAll = true; //假设都选中了
					for(var i = 0; i < inputs.length; i++) {
						if(inputs[i].checked !== true) { //当前这个没选中
							isCheckedAll = false;
							break;
						}
					}
					j_cbAll.checked = isCheckedAll;
				};
			}
		</script>
	</body>

</html>